import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input, message } from "antd";
import { useNavigate } from "react-router-dom";
import { LoginApi } from "../../api/Apifox";
import style from "./login.module.scss";
import { UserOutlined } from "@ant-design/icons";
 
// 登录页面组件
function Index() {
  // 定义表单字段类型
  type FieldType = {
    username?: string;
    password?: string;
    remember?: boolean;
  };
 
  // 获取导航函数
  const nav = useNavigate();
 
  // 表单提交成功后的处理函数
  const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
    console.log("Success:", values);
    const res = await LoginApi(values);
    console.log(res);
 
    if (res.data.code === 10000) {
      // 登录成功，跳转到首页
      nav("/home");
      // 保存token信息到localStorage中，以便后续请求使用
      localStorage.setItem("accessToken", res.data.data.accessToken);
      // 保存refreshToken信息到localStorage中，以便后续请求使用
      localStorage.setItem("refreshToken", res.data.data.refreshToken);
      // 保存用户信息到localStorage中，以便后续请求使用
      localStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo));
      // 显示成功提示信息
      message.success({
        type: "success",
        content: res.data.message,
      });
    } else {
      // 登录失败，显示错误提示信息
      message.error({
        type: "error",
        content: res.data.message,
      });
    }
  };
 
  // 表单提交失败后的处理函数
  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
 
  // 渲染登录页面
  return (
    <div className={style["login-bg"]}>
      {/* 添加半透明遮罩增强层次感 */}
      <div className={style["login-overlay"]}></div>
      <div className={style["login-container"]}>
        {/* 调整logo区域样式 */}
        <div className={style["login-header"]}>
          <div className={style["login-avatar"]}>
            <UserOutlined style={{ fontSize: 40, color: "#6a5af9" }} />
          </div>
          <div className={style["login-title"]}>后台管理系统</div>
          <div className={style["login-subtitle"]}>请使用账号密码登录</div>
        </div>
        {/* 优化表单内边距和阴影效果 */}
        <Form
          name="login"
          className={style["login-form"]}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: "请输入账号!" }]}
            className={style["form-item"]}
          >
            <Input
              size="large"
              placeholder="请输入账号"
              prefix={<UserOutlined className={style["input-icon"]} />}
              className={style["login-input"]}
            />
          </Form.Item>
          <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
            className={style["form-item"]}
          >
            <Input.Password
              size="large"
              placeholder="请输入密码"
              className={style["login-input"]}
            />
          </Form.Item>
          {/* 记住我复选框 - 仅保留单个子元素 */}
          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            label={null}
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          {/* 忘记密码链接 - 使用独立的 Form.Item */}
          <Form.Item label={null}>
            <div style={{ marginTop: "-15px", textAlign: "right" }}>
              <a href="#" className={style["forgot-link"]}>
                忘记密码?
              </a>
            </div>
          </Form.Item>
          {/* 登录信息提示 */}
          <Form.Item>
            <div style={{textAlign:"center",color:"#ccc"}}>
              <p>管理员:账号:admin22密码:admin2</p>
              <p>普通用户:账号:admin密码:admin</p>
            </div>
          </Form.Item>
 
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={style["login-btn"]}
              size="large"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className={style["login-bottom"]}>
          <span>还没有账号？</span>
          <a href="#" className={style["register-link"]}>
            立即注册
          </a>
        </div>
      </div>
    </div>
  );
}
 
export default Index;